<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title></title>
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style>
        .head-one {
            padding: 20px;
            box-sizing: inherit;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .head-two {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
        }

        .head-three {
            margin-top: 20px;
            box-sizing: inherit;
            display: block;
            border: 1px solid #ebeef5;
        }

        .table-main {
            text-align: center;
            line-height: 100%;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;
        }

        .el-card__body {
            margin-bottom: 15px;
            padding: 20px 20px 10px 20px;
            background-color: white;
            font-size: 14px;
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table__header {
            table-layout: fixed;
            border-collapse: separate;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }
    </style>
</head>

<body class="sticky-header">


<%@include file="../inc/left.jsp" %>


<!-- main content start-->
<div class="main-content">

    <%@include file="../inc/header.jsp" %>


    <!--body wrapper start-->

    <div data-v-2ef16592="" class="el-card filter-container is-never-shadow"><!---->
        <div class="el-card__body">
            <div data-v-2ef16592=""><i data-v-2ef16592="" class="el-icon-search"></i> <span
                    data-v-2ef16592="">筛选搜索</span>
                <button data-v-2ef16592="" type="button" class="el-button el-button--primary el-button--small"
                        style="float: right;"><!----><!----><span>
        查询搜索
      </span></button>
                <button data-v-2ef16592="" type="button" class="el-button el-button--default el-button--small"
                        style="float: right; margin-right: 15px;"><!----><!----><span>
        重置
      </span></button>
            </div>
            <div data-v-2ef16592="" style="margin-top: 15px;" class="head-one">
                <form data-v-2ef16592="" class="el-form el-form--inline">
                    <div class="row">
                        <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4"><label
                                class="el-form-item__label"
                                style="width: 140px;">广告名称：</label>
                            <div class="el-form-item__content">
                                <div data-v-2ef16592="" class="input-width el-input el-input--small"><!----><input
                                        type="text" autocomplete="off" placeholder="广告名称" class="el-input__inner">
                                    <!---->
                                    <!----><!----></div><!----></div>
                        </div>
                        <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4"><label
                                class="el-form-item__label"
                                style="width: 140px;">广告位置：</label>
                            <div class="el-form-item__content">
                                <div data-v-2ef16592="" class="el-select input-width el-select--small"><!---->
                                    <div class="el-input el-input--small el-input--suffix"><!----><input type="text"
                                                                                                         autocomplete="off"
                                                                                                         placeholder="全部"
                                                                                                         readonly="readonly"
                                                                                                         class="el-input__inner">
                                        <!----><span class="el-input__suffix"><span class="el-input__suffix-inner"><i
                                                class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                                            <!----></span>
                                            <!----></span><!----></div>
                                    <div class="el-select-dropdown el-popper" style="display: none; min-width: 203px;">
                                        <div class="el-scrollbar" style="">
                                            <div class="el-select-dropdown__wrap el-scrollbar__wrap"
                                                 style="margin-bottom: -17px; margin-right: -17px;">
                                                <ul class="el-scrollbar__view el-select-dropdown__list"><!---->
                                                    <li data-v-2ef16592="" class="el-select-dropdown__item">
                                                        <span>PC首页轮播</span></li>
                                                    <li data-v-2ef16592="" class="el-select-dropdown__item">
                                                        <span>APP首页轮播</span></li>
                                                </ul>
                                            </div>
                                            <div class="el-scrollbar__bar is-horizontal">
                                                <div class="el-scrollbar__thumb"
                                                     style="transform: translateX(0%);"></div>
                                            </div>
                                            <div class="el-scrollbar__bar is-vertical">
                                                <div class="el-scrollbar__thumb"
                                                     style="transform: translateY(0%);"></div>
                                            </div>
                                        </div><!----></div>
                                </div><!----></div>
                        </div>
                        <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4"><label
                                class="el-form-item__label"
                                style="width: 140px;">到期时间：</label>
                            <div class="el-form-item__content">
                                <div data-v-2ef16592=""
                                     class="el-date-editor input-width el-input el-input--small el-input--prefix el-input--suffix el-date-editor--date">
                                    <!----><input type="date" autocomplete="off" name="" placeholder="请选择时间"
                                                  class="el-input__inner"><span class="el-input__prefix"><i
                                        class="el-input__icon el-icon-date"></i><!----></span><span
                                        class="el-input__suffix"><span class="el-input__suffix-inner"><i
                                        class="el-input__icon"></i><!----></span><!----></span><!----></div><!---->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div data-v-2ef16592="" class="el-card operate-container is-never-shadow head-two "><!---->
                <div class="el-card__body"><i data-v-2ef16592="" class="el-icon-tickets"></i> <span data-v-2ef16592=""
                                                                                                    class="head-one1">数据列表</span>
                    <button data-v-2ef16592="" type="button"
                            class="el-button btn-add el-button--default el-button--mini "style="margin-left: 1150px"><!----><!----><span>添加广告</span>
                    </button>
                </div>
            </div>


            <div class="head-three">
                <table class="table table-bordered table-main">
                    <thead>
                    <tr>
                        <th style="text-align: center"><input type="checkbox" id="input-all"></th>
                        <th style="text-align: center">编号</th>
                        <th style="text-align: center">广告名称</th>
                        <th style="text-align: center">广告位置</th>
                        <th style="text-align: center">广告图片</th>
                        <th style="text-align: center">时间</th>
                        <th style="text-align: center">上线/下线</th>
                        <th style="text-align: center">点击次数</th>
                        <th style="text-align: center">生成订单</th>
                        <th style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${advertiseList}" var="ad">
                        <tr>
                            <td><input type="checkbox" id="checks"></td>
                            <td>${ad.id}</td>
                            <td>${ad.name}</td>
                            <td>${ad.type}</td>
                            <td><img src="${ad.pic}" style="width: 100px" height="100px"></td>
                            <td><p>开始时间：<fmt:formatDate value="${ad.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
                                <P>结束时间：<fmt:formatDate value="${ad.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/></P></td>
                            <td>${ad.status}</td>
                            <td>${ad.clickCount}</td>
                            <td>${ad.orderCount}</td>
                            <td>
                                <button class="btn-info">编辑</button>
                                <button class="btn-danger">删除</button>
                            </td>
                        </tr>
                    </c:forEach>


                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- End Wrapper-->


    <%@include file="../inc/footer.jsp" %>


</div>
<!--End main content -->
<script>
    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick=function () {
            all.checked=this.checked
        }
    }
</script>

<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->

</body>

</html>

